<template>
    <div>
        {{empSearchFrom}}
        <!--1. 条件查询-->
        <el-form :inline="true" :model="empSearchFrom" class="demo-form-inline" style="text-align: left;">
            <el-form-item>
                <el-input v-model="empSearchFrom.ename" placeholder="员工姓名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="empSearchFrom.city" placeholder="员工籍贯"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select v-model="empSearchFrom.did" placeholder="所在部门">
                    <el-option label="所有部门" value="0"/>
                    <el-option v-for="c in dept" :label="c.dname" :value="c.did"/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search" size="medium" plain>查询</el-button>
                <el-button type="primary" @click="add" size="medium" plain>添加</el-button>
                <el-button type="danger" @click="handleDelete" size="medium" plain>批量删除</el-button>
            </el-form-item>
        </el-form>
        <!--2. 员工列表展示-->
        <el-table
                :data="emps"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection">
            </el-table-column>
            <el-table-column
                    label="员工编号"
                    prop="eid"
                    align="center"
                    width="150">
            </el-table-column>
            <el-table-column
                    label="员工姓名"
                    prop="ename"
                    align="center"
                    width="150">
            </el-table-column>
            <el-table-column
                    label="出生日期"
                    prop="bdate"
                    align="center"
                    width="150">
            </el-table-column>
            <el-table-column
                    label="性别"
                    prop="sex"
                    align="center"
                    width="150">
            </el-table-column>
            <el-table-column
                    label="员工籍贯"
                    prop="city"
                    align="center"
                    width="150">
            </el-table-column>
            <el-table-column
                    label="所在部门"
                    prop="dname"
                    align="center"
                    width="150">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页导航-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[6, 12, 18, 24]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="total">
        </el-pagination>

        <!--编辑员工的对话框-->
        <el-dialog :title="title" :visible.sync="dialogFormVisible" align="left" :close-on-click-modal="false">
            {{stud}}
            <el-form :model="emp" :rules="rules" ref="ruleForm">
                <el-form-item label="员工姓名" :label-width="formLabelWidth" prop="ename">
                    <el-input v-model="emp.ename" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="出生日期" :label-width="formLabelWidth" prop="bdate">
                    <el-input v-model.number="emp.bdate" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="员工性别" :label-width="formLabelWidth" align="left" prop="sex">
                    <el-radio v-model="emp.sex" label="男" value="男"/>
                    <el-radio v-model="emp.sex" label="女" value="女"/>
                </el-form-item>
                <el-form-item label="员工籍贯" :label-width="formLabelWidth" prop="city">
                    <el-input v-model="emp.city" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所在部门" :label-width="formLabelWidth" align="left" prop="did">
                    <el-select v-model="emp.did">
                        <el-option v-for="c in dept" :label="c.dname" :value="c.did"/>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                emps: [],       // 所有员工列表
                page: 1,        // 当前页
                pageSize: 6,    // 页大小
                total: 100,     // 总共记录数
                empSearchFrom:{},
                dept:[],        // 所有部门
                dialogFormVisible: false,
                formLabelWidth: '100px',
                emp:{},         // 表单中关联的员工对象
                title: '',      // 表单标题
                multipleSelection: [],
                eids: [],       // 要删除的员工编号
                rules: {
                    //1. 验证员工姓名
                    ename: [
                        {required: true, message: '请输入员工姓名', trigger: 'blur'},
                    ],
                    //2. 验证出生日期
                    bdate: [
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    //3. 验证性别
                    sex:[
                        {required: true, message: '请选择员工性别', trigger: 'change'},
                    ],
                    //4. 验证籍贯
                    city:[
                        {required: true, message: '请输入员工籍贯', trigger: 'blur'},
                    ],
                    //5. 验证部门编号
                    did:[
                        {required: true, message: '请选择部门编号', trigger: 'change'},
                    ]
                }
            }
        },
        created() {
            // 1. 查询所有员工
            //this.findEmps();
            // 2. 分页查询
            //this.findByPage();
            // 3. 部门查询
            this.findDepts();
            // 4. 条件查询带分页
            this.search();
        },
        methods: {
            //1. 查询所有员工
            findEmps(){
                this.$axios.get("/emp?cmd=list").then(({data}) => {
                    if (data.code === 0) {
                        this.emps = data.list
                    }
                })
            },
            //2. 页大小（pagerSize）改变时触发事件
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val
                this.findByPage()
            },
            //3. 当前页大小改变时触发的事件
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.page = val
                this.findByPage()
            },
            //4. 分页查询
            findByPage() {
                this.$axios.get(`/emp?cmd=findByPage&page=${this.page}&pageSize=${this.pageSize}`)
                    .then(({data}) => {
                        if (data.code === 0) {
                            this.emps = data.pr.rows
                            this.total = data.pr.total
                        }
                    })
            },
            //5. 查询所有部门
            findDepts() {
                this.$axios.get(`/dept`)
                    .then(({data}) => {
                        if (data.code === 0) {
                            this.dept = data.list
                        }
                    })
            },
            //6. 条件查询带分页
            search() {
                //6.1 将查询json对象转换为字符串传入到后台
                let empStr = JSON.stringify(this.empSearchFrom)
                console.log(empStr)
                this.$axios.post(`/emp?cmd=search&page=${this.page}&pageSize=${this.pageSize}`,
                    "emp=" + empStr)
                    .then(({data}) => {

                        console.log(data)
                        if (data.code === 0) {
                            this.emps = data.pr.rows
                            this.total = data.pr.total
                        }
                    })
            },
            // 7. 添加
            add() {
                // 7.1 修改表单标题
                this.title = "添加员工"
                // 7.2 打开对话框
                this.dialogFormVisible = true
                // 7.3 清空表单数据
                this.emp = {}
            },
            //8. 修改员工
            handleEdit(index, row) {
                console.log("row:", row)
                //8.1 打开对话框
                this.dialogFormVisible = true
                //8.2 修改表单的标题
                this.title = "修改员工"
                //8.3 为表单赋值
                this.emp = row
            },
            //9. 保存员工
            // 如何区分是添加还是修改？通过emp.eid是否有值
            save() {
                let url = "/emp?cmd=add"
                let _this = this
                if (this.emp.eid) {  //此时为修改
                    url = "/emp?cmd=update"
                }
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {        //如果表单所有的控件都验证通过，就提交数据到后台
                        this.$axios.post(url, "emp=" + JSON.stringify(this.emp))
                            .then(({data}) => {
                                if (data.code === 0) {    // 如果是添加或修改成功，就刷新页面
                                    _this.search()
                                }
                                //关闭对话框
                                _this.dialogFormVisible = false
                            })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            // 10. 删除员工
            handleDelete(index, row) {
                let _this = this
                //10.1 处理要删除的员工id数组
                if (row) {
                    this.eids = [row.eid]
                } else {
                    this.eids = this.multipleSelection.map(m => m.eid)
                }
                //10.2 开始确认删除
                this.$confirm(`你真的要删除${this.eids}是否继续?`, '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //10.2.1 当点击了“确定”按钮后，向后台发出删除请求
                    this.$axios.get(`/emp?cmd=delete&eids=${this.eids}`)
                        .then(({data}) => {
                            if (data.code === 0) {    // 如果是添加或修改成功，就刷新页面
                                this.$message({
                                    type: 'success',
                                    message: data.message,
                                    onClose() {
                                        _this.search()
                                    }
                                });
                            }
                        })
                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log("所选择行：", this.multipleSelection)
            }
        }
    }
</script>


<style scoped>
    .el-pagination {
        text-align: right;
        margin-top: 10px;
    }
</style>